<?php
	session_start();	//start session
	if(!isset($_SESSION['username'])){	//check if the user data is in the session
		header("location: login.php");	//if not redirect back to user
	}
?>
<html>
	<head>
		<title></title>
		<link rel="stylesheet" href="style.css">
		<script src="jquery-1.11.0.js"></script>
		<!--<script src="community_gen.js"></script>-->
		<center>
		<script>
			//makes a synchronous call to the page u and return the 
			//result as object
			var t;
			var gblobalId;
			var deleteId;
			
			function syncAjax(u){
				var obj=$.ajax(
					{url:u,
					 async:false
					 }
				);
				console.log(obj); 
				return $.parseJSON(obj.responseText);
				//return console.log(obj.responseText);
				
			}
			
					function validate(){
				//check if the data is correct
				var obj=document.getElementById("fullname");
				if(validateCommunityMember(obj.value)==true){
					
				}else{
					obj.style.backgroundColor="red";
					return false;
				}
			}
			
			
			function validateCommunityMember(str){
				var reName=new RegExp("[A-X][a-z]");
				if(reName.test(str)){
					return true;
				}else{
					return false;
				}
			
			}
			
			function edit(obj,community_member_id,event){
				//console.log("gibrish");
				var r=get_all_community_members(community_member_id);
				//console.log("gibrish");
				console.log(community_member_id);
				console.log(r);
				if(r.result==0){
				//these is the part of the code that i have edited
									//document.getElementById("divstatus").innerHTML=r.message;
									$("#divstatus").text(r.message);
				//these is the part of the code that i have edited
				//show error message
					return;
					//console.log("gibrish");
				}
				//get the data from object r and put it in the form
				$("#card_number").prop("value", r.community_member.card_number);
				$("#fullname").prop("value", r.community_member.fullname);
				$("#age").prop("value", r.community_member.age);
				$("#birthdate").prop("value", r.community_member.birthdate);
				$("#gender").prop("value", r.community_member.gender);
				$("#household_id").prop("value", r.community_member.household_id);
				$("#community_id").prop("value", r.community_member.community_id);
				$("#registration_date").prop("value", r.community_member.registration_date);
				$("#up_datedate").prop("value", r.community_member.up_datedate);
				$("#device_id").prop("value", r.community_member.device_id);
				//show the form
				//find where the user clicked and store it in x and y
				var y=event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divEdit").css("top",y);
				$("#divEdit").css("left",x);
				//display the form
				$("#divEdit").fadeIn(1000);
			}
			
			function confirm_delete(obj,community_member_id,event){
				//cancel();
				var y = event.clientY;
				var x = event.clientX/1.2;

				//Utilize above variables with x,y coordinates to place the form
				$("#divDelete").css("top",y);
				$("#divDelete").css("left",x);
				$("#divDelete").fadeIn(500);
				t = community_member_id;
				}
			
			//deletes a result for one community member
			function delete_community_member(){
			var community_member_id = t;
			var u="community_action.php?cmd=2&community_member_id="+community_member_id;
			console.log(u);
			
			cancel();
			window.location.reload(true);
			return syncAjax(u);
			
			}
			
			//returns a result object for one community member 
			function get_all_community_members(community_member_id){
			t=community_member_id;
				var u="community_action.php?cmd=1&community_member_id="+t;
				console.log(u);
				
				return syncAjax(u);
			}
			//makes asynchronous call to the save page
			function save(){
				var cn = document.getElementById("card_number").value;
				var fn = document.getElementById("fullname").value;
				var age = document.getElementById("age").value;
				var bd = document.getElementById("birthdate").value
				var gd = document.getElementById("gender").value;
				var hi = document.getElementById("household_id").value;
				var ci = document.getElementById("community_id").value;
				var rd = document.getElementById("registration_date").value;
				var ud = document.getElementById("up_datedate").value;
				var di = document.getElementById("device_id").value;
				var u="community_action.php?cmd=3&community_member_id="+t+"&cn="+cn+"&fn="+fn+"&age="+age+"&bd="+bd+"&gd="+gd+"&hi="+hi+"&ci="+ci+"&rd="+rd+"&ud="+ud+"&di="+di;
				
				r=syncAjax(u);
				
				//$.getJSON(u,saveDone);
				window.location.reload(true);
				cancel();
			}
			
			function addMem(event){
			   
			    var y = event.clientY;
				var x=event.clientX/2;
				//use x and y to set the location of the form
				$("#divADD").css("top",y);
				$("#divADD").css("left",x);
				//display the form
				$("#divADD").fadeIn(1000);
			}
			
			function cancelMem(){
			
			$("#divADD").fadeOut(500);
			}
			
			function saveMem(){
			    var fullname=document.getElementById("full_name").value;
				
				var gend;
				if(document.getElementById("mgend").checked)
				gend="male";
				if(document.getElementById("fgend").checked)
				gend="female";
				
				var cn=document.getElementById("card_N").value;
				var cid =document.getElementById("cID").value;
				
				var bdate =document.getElementById("Bdate").value;
				var regDate =document.getElementById("regDate").value;
				
				var Hhold =document.getElementById("hID").value;
				
				var u ="communty_action.php?cmd=4&fullname="+fullname + "&gend=" + gend
                  	  +"&cn="+cn
					  +"&cid="+cid
					  +"&bdate="+bdate
					  +"&regDate="+regDate
					  +"&Hhold="+Hhold;
					  
					 r= syncAjax(u);
				$.getJSON(u,saveDone);
				window.location.reload();
			
			cancelMem();
			}
			
			function saveDone(data){
				
				alert(data);
			}
			//hides the form
			function cancel(){
				//fade out the form in half a second
				$('#divEdit').fadeOut(500);
				$('#divDelete').fadeOut(500);
				
			}
			
			function search(){
			var s = document.getElementById("search").value;
			var u = "community_action.php?cmd=4&s="+s;
			r=syncAjax(u);
			$.getJSON(u,saveDone);
			}
			
			
		</script>
	</head>
	<body>
		<table>
			<tr>
				<td colspan="2" id="pageheader">
					Health Information System
				</td>
			</tr>
			<tr>
				<td id="mainnav">
					<div class="menuitem">location</div>
					<div class="menuitem">opd cases</div>
					<div class="menuitem">health promotion</div>
					<div class="menuitem">nutrition</div>
					<div class="menuitem">child welfare</div>
					<div class="menuitem">family planning</div>
					<div class="menuitem">logout</div>
				</td>
				<td id="content">
					<div id="divPageMenu">
						<a href='opd_record_list.php'>
						<span class="topmenuitem" >OPD Records</span></a>
						
						<a href='opd_case_list.php'>
						<span class="topmenuitem" >OPD Cases</span></a>
						
						<span class="topmenuitem active" >Community Members</span>
						
						<a href='birth_index.php'>
						<span class="topmenuitem"> Birth Records</span></a>
					</div>
                   
					
					<div id="divContent">
						Community Members
						<table class="reportTable" width="100%" >
							<tr class="header" >
								<td>Community Member ID</td>
								<td>Community Member Name</td>
								<td>Update</td>
							</tr>
<?php	
	include("community_members2.php");
	$obj=new community_members2();
	//$community_member_id;
	if(!$obj->get_all_community_members()){
		echo "error";
		exit();
	}
	
	$row=$obj->fetch();
	$row_counter=0;
	while($row){
		
		if($row_counter%2==0){
			$style=" class='row1' ";
		}else{
			$style=" class='row2'  ";
		}	
		$community_member_id=$row['community_member_id'];
		echo "<tr $style >";
			echo "<td>$community_member_id</td>";
			echo "<td>$row[fullname]</td>";
			echo "<td><span class='hotspot' onclick='edit(this,$community_member_id,event)'>Update</span></td>";
			echo "<td><span class='hotspot' onclick='confirm_delete(this,$community_member_id,event)'><img src= 'deleteicon.png' alt='Delete'</span></td>";
		echo "</tr>";
		$row=$obj->fetch();
		$row_counter++;
	}
?>
						</table>
					</div>
				</td>
			</tr>
		</table>
		
		
		
		<tr><td colspan = "3" align = "center">
		</br></br>
		
		<div id = "newRecord" onclick="addMem(event)" class = "button">
			         ADD NEW MEMBER
		</div>
		
		
		
	</td></tr>
		
		
		
		<div id="divDelete" class="popupForm">
			<table class="tableForm">
				<tr>
					<td class="label"></td>
						<td>
							<input type="button" value="delete" onclick="delete_community_member()" >
						</td>	
						<td>
							<input type="button" value="cancel" onclick="cancel()" >
						</td>
					</tr>
			</table>
		</div>
		
		
		
		
	<div id="divEdit" class="popupForm">
		<table class="tableForm" >
					<tr>
						<td class="label">fullname :</td>
						<td class="field"><input type="text" value="<?php echo $row['fullname'] ?>" id="fullname" >
						</td>
					</tr>
					<tr>
						<td class="label">card_number:</td> 
						<td class="field"><input type="text" value="" id="card_number" >
						</td>
					</tr>
					<tr>
						<td class="label">age:</td> 
						<td class="field"><input type="text" value="" id="age" >
						</td>
					</tr>
					<tr>
						<td class="label">birthdate :</td>
						<td class="field"><input type="text" value="" id="birthdate" >
						</td>
					</tr>
					<tr>
						<td class="label">gender:</td> 
						<td class="field"><input type="text" value="" id="gender" >
						</td>
					</tr>
					<tr>
						<td class="label">household_id :</td>
						<td class="field"><input type="text" value="" id="household_id" >
						</td>
					</tr>
					<tr>
						<td class="label">community_id:</td> 
						<td class="field"><input type="text" value="" id="community_id" >
						</td>
					</tr>
					<tr>
						<td class="label">registration_date :</td>
						<td class="field"><input type="text" value="" id="registration_date" >
						</td>
					</tr>
					<tr>
						<td class="label">up_datedate:</td> 
						<td class="field"><input type="text" value="" id="up_datedate" >
						</td>
					</tr>
					<tr>
						<td class="label">device_id :</td>
						<td class="field"><input type="text" value="" id="device_id" >
						</td>
					</tr>
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="save()" >
							<input type="button" value="cancel" onclick="cancel()" >
						</td>
					</tr>
			</table>
				
	</div>
	<div id="divADD" class="popupForm">
	<table class="tableForm" >
					<tr>
						<td class="label">FullName: </td>
						<td class="field"><input type="text" value="" id="full_name" ></td>
					</tr>
					<tr>
						<td class="label">Gender:</td> 
						<td class="field"><input type="radio" name="gender" value="male" id="mgend">Male
						                  <input type="radio" name="gender" value="female" id="fgend">Female
						</td>
					</tr>
					
					<tr>
						<td class="label">Card No :</td>
						<td class="field"><input type="text" value="" id="card_N" >
						</td>
					</tr>
					
					<tr>
						<td class="label">Community ID :</td>
						<td class="field"><input type="text" value="" id="cID" >
						</td>
					</tr>
					
					
					<tr>
						<td class="label">BirthDate :</td>
						<td class="field"><input type="text" value="" placeholder="YYYY-MM-DD"id="Bdate" >
						</td>
					</tr>
					
					<tr>
						<td class="label">Registration Date :</td>
						<td class="field"><input type="text" value="" placeholder="YYYY-MM-DD"id="regDate" >
						</td>
					</tr>
					
					<tr>
						<td class="label">HouseHold ID :</td>
						<td class="field"><input type="text" value="" id="hID" >
						</td>
					</tr>
					
					<tr>
						<td class="label"></td>
						<td class="field">
							<input type="button" value="save" onclick="saveMem()" >
							<input type="button" value="cancel" onclick="cancelMem()" >
						</td>
					</tr>
			</table>
	
	
	</div>
	</center>
	</body>
</html>	